<template>
  <div :id="args.id || 'player-con'">
    <slot name="image"></slot>
  </div>
</template>
<script>
import RateComponent from './components/RateComponent'
import PreviewVodComponent from './components/PreviewVodComponent'
import QualityComponent from './components/QualityComponent'
import BulletScreenComponent from './components/BulletScreenComponent'
const skinLayout = [
  { name: 'bigPlayButton', align: 'cc' },
  {
    name: 'H5Loading',
    align: 'cc'
  },
  { name: 'errorDisplay', align: 'tlabs', x: 0, y: 0 },
  { name: 'infoDisplay' },
  { name: 'tooltip', align: 'blabs', x: 0, y: 56 },
  { name: 'thumbnail' },
  {
    name: 'controlBar',
    align: 'blabs',
    x: 0,
    y: 0,
    children: [
      { name: 'progress', align: 'blabs', x: 0, y: 44 },
      { name: 'playButton', align: 'tl', x: 15, y: 12 },
      { name: 'timeDisplay', align: 'tl', x: 10, y: 7 },
      {
        name: 'fullScreenButton',
        align: 'tr',
        x: 10,
        y: 12
      },
      { name: 'volume', align: 'tr', x: 5, y: 10 }
    ]
  }
]
export default {
  props: {
    args: {
      type: Object,
      required: true,
      default: function() {
        return {
          id: 'player-con', // 播放器外层容器的dom元素ID
          source: '', // 视频播放地址URL
          vid: '', // 媒体转码服务的媒体ID
          playauth: '', // 播放凭证
          width: '100%', // 播放器宽度
          height: '486px', // 播放器高度
          cover: '', // 播放器默认封面图片
          format: '', // 播放地址格式
          autoplay: false, // 播放器是否自动播放
          encryptType: 0, // 设置是否播放阿里云视频加密（私有加密）视频
          previewDuration: 0, // 预览时长
          previewEndHtml: '', // 预览结束后显示在播放器中间的字符串。默认为空。
          previewBarHtml: '', // 预览结束后显示在播放器左下角的字符串。默认为空。
          controlBarVisibility: 'always', // 控制面板的实现
          marquee: [] // 跑马灯
        }
      }
    },
    skinLayout: {
      type: Array,
      default: function() {
        return skinLayout
      }
    },
    showProgress: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.createDemoPlayer()
  },
  methods: {
    createDemoPlayer() {
      let props = {
        id: 'player-con', // 播放器外层容器的dom元素ID
        ...this.args,
        skinLayout: this.skinLayout,
        disableSeek: this.showProgress == 1, // 禁用进度条的Seek
        components: [
          {
            name: 'RateComponent',
            type: RateComponent
          },
          {
            name: 'PreviewVodComponent',
            type: PreviewVodComponent,
            args: [this.args.previewDuration, this.args.previewEndHtml, this.args.previewBarHtml]
          },
          {
            name: 'QualityComponent',
            type: QualityComponent
          },
          {
            name: 'BulletScreenComponent',
            type: BulletScreenComponent,
            /** Descriptions of the scrolling text component parameters: text, style, bulletPosition
             * text: String 类型, 需要显示的文字
             * style: Object 类型, 类似 CSS 的写法, CSS 属性名用驼峰式的写法
             * bulletPosition:  可选参数, 默认为 'random': 随机位置(位置滚动一次后会随机改变); 另外可以设置成 'top'(顶部) 或 'bottom'(底部)
             */
            args: this.args.marquee
          }
        ]
      }
      this.player = new Aliplayer(props)
      this.player.on('sourceloaded', this.handleQuality)

      // 绑定事件，当 AliPlayer 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
      this.player.on('ready', () => {
        this.$emit('ready', this.player)
      })
      this.player.on('play', () => {
        this.$emit('play', this.player)
      })
      this.player.on('pause', () => {
        this.$emit('pause', this.player)
      })
      this.player.on('ended', () => {
        this.$emit('ended', this.player)
      })
      this.player.on('timeupdate', () => {
        this.$emit('timeupdate', this.player)
      })
      this.player.on('requestFullScreen', () => {
        this.$emit('requestFullScreen', this.player)
      })
      this.player.on('cancelFullScreen', () => {
        this.$emit('cancelFullScreen', this.player)
      })
    },
    // 切换清晰度
    handleQuality(params) {
      var paramData = params.paramData
      var desc = paramData.desc
      var definition = paramData.definition
      this.player.getComponent('QualityComponent').setCurrentQuality(desc, definition)
    },
    /**
     * 加载完成
     */
    ready: function() {
      this.player.ready()
    },
    /**
     * 销毁
     */
    dispose: function() {
      this.player.dispose()
    },
    /**
     * 播放视频
     */
    play: function() {
      this.player.play()
    },
    /**
     * 暂停视频
     */
    pause: function() {
      this.player.pause()
    },
    /**
     * 重播视频
     */
    replay: function() {
      this.player.replay()
    },
    /**
     * 跳转到某个时刻进行播放
     * @argument time 的单位为秒
     */
    seek: function(time) {
      this.player.seek(time)
    },
    /**
     * 获取当前时间 单位秒
     */
    getCurrentTime: function() {
      return this.player.getCurrentTime()
    },
    /**
     *获取视频总时长，返回的单位为秒
     * @returns 返回的单位为秒
     */
    getDuration: function() {
      return this.player.getDuration()
    },
    /**
      获取当前的音量，返回值为0-1的实数ios和部分android会失效
     */
    getVolume: function() {
      return this.player.getVolume()
    },
    /**
      设置音量，vol为0-1的实数，ios和部分android会失效
     */
    setVolume: function(vol) {
      this.player.setVolume(vol)
    },
    /**
     *直接播放视频url，time为可选值（单位秒）目前只支持同种格式（mp4/flv/m3u8）之间切换暂不支持直播rtmp流切换
     *@argument url 视频地址
     *@argument time 跳转到多少秒
     */
    loadByUrl: function(url, time) {
      this.player.loadByUrl(url, time)
    },
    /**
     * 设置播放速度
     *@argument speed 速度
     */
    setSpeed: function(speed) {
      this.player.setSpeed(speed)
    },
    /**
     * 设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297
     *@argument w 播放器宽度
     *@argument h 播放器高度
     */
    setPlayerSize: function(w, h) {
      this.player.setPlayerSize(w, h)
    },
    /**
     * 切换
     *@argument vid 视频id
     *@argument playauth 播放凭证
     */
    replayByVidAndPlayAuth: function(vid, playauth) {
      this.player.replayByVidAndPlayAuth(vid, playauth)
    },
    /**
     * 全屏事件
     */
    requestFullScreen: function() {
      this.player.requestFullScreen()
    },
    /**
     * 取消全屏事件
     */
    cancelFullScreen: function() {
      console.log(this.player)
      this.player.cancelFullScreen()
    }
  },
  destroyed() {
    this.player = null
  }
}
</script>
